<template>
	<!--运单跟踪-->
	<div>
		<view v-if="showMap" @touchmove.stop.prevent="">
			<div style="min-height: 50px;display: flex;align-items: center;background-color: #ffffff;">
				<div style="flex: 1;display: flex;flex-direction: column;">
					<view>【S1】{{formData.shipDistrictName}}</view>
					<view>【S2】{{formData.deliveryDistrictName}}</view>
				</div>
				<div style="flex: 1;display: flex;flex-direction: column;">
					<view><span style="font-weight: bold;">总里程：</span>{{parseInt((DrivingRouteDetails.distance)/1000)}}公里</view>
					<view><span style="font-weight: bold;">预计时长：</span>{{parseInt((DrivingRouteDetails.duration)/3600)}}小时{{Math.ceil(((DrivingRouteDetails.duration)%3600)/60)}}分钟</view>
				</div>
			</div>
			<Lyn4ever-gaodeRoutePlanning 
			        :longitude="longitude" 
			        :latitude="latitude" 
			        width="100vw" 
			        heith="60vh"
			        :Config="Config" 
			        :startPoi="startPoi" 
			        :wayPoi="wayPoi" 
			        :endPoi="endPoi"
					:includePoints="AllPoints"
					@getDrivingRoute="getDrivingRouteDetails"/>
		</view>
		
		<view style="position: relative;display: flex;flex-direction: row;align-items: center;padding: 12px 10px;font-weight: 400;">
			<view style="width: 4px;height: 12px;border-radius: 10px;background-color: #2979ff;margin-right: 6px"></view>
			<view style="display: flex;flex-direction: column;flex: 1;color: #333;">运输轨迹</view>
		</view>
		<view v-if="list.length>0">
			<uni-steps :options="stepsList" active-color="#007AFF" :active="0" direction="column" />
			<view style="height: 100px;"></view>
		</view>
		<view v-else>
			<image src="../../../static/none.png" style="height: 260px;width: 260px;display: block;margin: 0 auto;padding-top: 50px;"></image>
			<view style="display: flex;justify-content: center;align-items: center;">
				暂无运输轨迹
			</view>
		</view>
	</div>
</template>

<script>
	import {
		scheduleCarlogList
	} from '@/api/system/dispatch.js'
	
	import Config from '@/uni_modules/Lyn4ever-gaodeRoutePlanning/lib/config.js';
	const amapFile = require('@/uni_modules/Lyn4ever-gaodeRoutePlanning/lib/amap-uni.js');
	
	export default {
		props: {
			data:{
				type: Object,
				default:{}
			},
			scheduleId:{
				type: String,
				default:''
			}
		},
		data() {
			return {
				list:[],
				stepsList:[],
				scheduleId_:'',
				
				formData:{},  //运单信息
				longitude:'',
				latitude:'',
				Config:{
					showMarks:true,
					lineColor: "#3d8965", //路径颜色
					//lineWidth: 4, //路径宽度
					lineWidth: 10, //路径宽度
					startImage:'/static/map/start.png',
					wayImage:'/static/map/tjd.png',
					endImage:'/static/map/end.png'
				},
				startPoi:'',  //始发点经纬度','连接
				wayPoi:'',   
				endPoi:'',   //目的点经纬度','连接
				AllPoints:[],
				showMap:false,
				//路线信息
				DrivingRouteDetails:{}
			}
		},
		watch: {
			data:{
			    handler(newVal,oldVal){
					if(newVal.waybillId)
					{
						this.formData=newVal
						//this.getLanLatInit()
					}
			    },
				deep:true,
				immediate:true
			},
			scheduleId(newValue, oldValue) {
				if(newValue)
				{
					this.scheduleId_=newValue
					//this.getList()
				}
			},
		},
		created() {
			// uni.getLocation({
			// 	type: 'gcj02',
			// 	success: (res) => {
			// 		this.latitude=res.latitude
			// 		this.longitude=res.longitude
			// 	},
			// 	fail: (res) => {
			// 		uni.showToast({
			// 			icon:'error',
			// 			title:'请打开定位'
			// 		})
			// 	}
			// });
		},
		methods: {
			async getList() {
				uni.showLoading({
					title: '正在加载',
				})
				await scheduleCarlogList(this.scheduleId_).then(res => {
					uni.hideLoading()
					if (res.code == '200') {
						this.list = res.data||[]
						this.stepsList=this.list.map(item=>{
							return {
								title:item.logMsg,
								desc:item.timeLoad
							}
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			async getLanLatInit(){
				this.startPoi=await this.getLanLat(this.formData.shipDistrictName,this.formData.shipAddress)
				this.endPoi=await this.getLanLat(this.formData.deliveryDistrictName,this.formData.deliveryAddress)
				let arr1={
					longitude:this.startPoi.split(',')[0],
					latitude:this.startPoi.split(',')[1]
				}
				let arr2={
					longitude:this.endPoi.split(',')[0],
					latitude:this.endPoi.split(',')[1]
				}
				this.AllPoints=[arr1,arr2]
				//数据加载完成后加载地图
				this.showMap=true
			},
			//根据名称获取经纬度
			getLanLat(districtName,Address){	
				return new Promise((resolve, reject) => {
					uni.request({
						 url: 'https://restapi.amap.com/v3/geocode/geo?parameters', 
						method:'GET',
						 data: {
							key: Config.GAODE_WEB_KEY,
							address:districtName+Address
						 },
						success: (res) => {
							resolve(res.data.geocodes[0].location)
							console.log('高德res',res.data.geocodes[0])
							// let jd = res.data.geocodes[0].location.split(',')[0]
							// let wd = res.data.geocodes[0].location.split(',')[1]
							//Map.openMap(parseFloat(wd),parseFloat(jd), address, 'gcj02')	
						}
					}) 
				})
			},
			//获取路线信息
			getDrivingRouteDetails(data){
				console.log(data[0])
				this.DrivingRouteDetails=data[0]
			}
		},
	}
</script>

<style scoped>

</style>